<template>
    <div id="login">
        <el-form  label-width="100px" class="demo-ruleForm">
            <h2>用户登录</h2>
            <p>用户名</p>
            <el-form-item >
                <el-input type="text" ref="name" v-model="userName"></el-input>
            </el-form-item>
            <p class="password">密码</p>
            <el-form-item  >
                <el-input type="password" ref="password" v-model="password"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submit">登录</el-button>
            
            </el-form-item>
        </el-form>
    </div>
    
</template>

<script>
export default {
    data(){
        return{
            userName:localStorage.getItem("user")?JSON.parse(localStorage.getItem("user")).name:"",
            password: localStorage.getItem("user")?JSON.parse(localStorage.getItem("user")).password:"",
        }
    },
    methods: {
        getData(){
            //获取输入的用户名和密码
            let name = this.userName; 
            let password = this.password;
            //判断用户是否输入内容
            if(name == "" || password == ""){
                this.tips();
                return
            }
            //提交后台验证
            this.$http.post("login",{username:name,password:password}).then(result=> {
                if(result.body.meta.status == 200){
                    //验证成功时进入后台,并且将用户名密码和token存储在本地存储
                    this.success()
                      //console.log(result.body)
                      this.$router.push("/manage")
                      let user = {name:name,password:password}
                      localStorage.setItem("user",JSON.stringify(user))
                      localStorage.setItem("token",result.body.data.token)
                }
                else{
                    //验证失败时
                    this.fail()
                }
            },function(err){
                //请求数据失败时
                console.log(err.statusText)
            })
        },
        submit(){
           this.getData()
        },
        //登录失败的弹窗提示
        fail(){
            this.$message({
                showClose: true,
                message: '用户名或者密码错误',
                duration:1000,
                type: 'error'
            });
        },
        //登录成功的弹窗提示
        success(){
            this.$message({
                showClose: true,
                message: '登录成功',
                duration:1000,
                type: 'success'
            });
        },
        tips(){
            //用户名或者密码未输入的弹窗提示
            this.$message({
                showClose: true,
                message: '用户名或密码不能为空',
                duration:1000,
                type: 'warning'
            });
        }
    }
}
</script>

<style lang="scss">
    #login{
        width: 100%;
        height: 100%;
        background: #e8f0fe;
        position: relative;
        .el-form{
            width: 400px;
            background: #fff;
            position: absolute;
            top:50%;
            left: 50%;
            margin-top:-181px;
            margin-left: -230px;
            padding: 30px;
            border-radius: 10px;
            .el-input{
                width: 100%;
                .el-input__inner{
                    background: #e8f0fe
                }
            };
            .el-form-item__content{
                margin-left: 0px !important
            };
            .el-button{
                width: 100%
            }
        };
        h2{
            margin: 0;
            padding: 0;
            font-weight: 500
        }
        p{
            font-size: 14px
        }
        .password{
            margin:20px 0;
            color: #676666;
        }
    }
</style>